<template>
  <div id="app">
    <!-- <span :class="[a1,b1]">
      动态绑定class，style，
      我是span
    </span>
    <span :style="'background:yellow;'">
      我是span
    </span>
    <span :style="{background:'yellow'}">
      我是span
    </span>
    <span :style="[{background:'yellow'},{fontSize:'90px'}]">
      我是span
    </span> -->
    <!-- 计算属性，return即可 -->
    <!-- {{num}}
    <button @click="num++">
      +
    </button>
    {{NewNum}} -->
    <!-- 父子组件传参
    父传子
     -->
    <!-- <HelloWorld @click="Add" :a1='a1'></HelloWorld> -->
    <!-- {{num}} -->
    <!-- 双向数据绑定 -->
    <input type="text" v-model="num" />
    <input type="checkbox" name="hobby" v-model="obj.hobby" value="0" id="" />吃
    <input type="checkbox" name="hobby" v-model="obj.hobby" value="1" id="" />喝
    <input type="checkbox" name="hobby" v-model="obj.hobby" value="2" id="" />玩
    <input type="checkbox" name="hobby" v-model="obj.hobby" value="3" id="" />乐
    <input
      type="checkbox"
      name="hobby"
      v-model="obj.hobby"
      value="4"
      id=""
    />打游戏
    <br />
    <select name="" id="" v-model="obj.edu">
      <option value="0">请选择</option>
      <option value="1">小学</option>
      <option value="2">初中</option>
      <option value="3">高中</option>
      <option value="4">大学</option>
    </select>
    {{ obj }}
    <!-- watch监听，data属性，计算属性，路由，props传递的参数 -->
    <!-- 自定义指令bind被绑定的时候调用,inserted被插入父节点调用,update更新,componentUpdated更新,unbind解绑使用 -->
    <!-- 过滤器，有全局的和局部的过滤器 -->
    {{ 123 || aaa }}
    <!-- 处理边界情况ref，课绑定元素或者组件上，如果是组件上就是组件实例 -->
    <!-- 生命周期函数八个 -->
    <p>
      我是p标签！！！
    </p>
    <input type="text" v-focus>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";
export default {
  components: {
    HelloWorld,
  },
  methods: {
    Add(val) {
      this.num += val;
    },
  },
  filters: {
    aaa(val) {
      return val > 100 ? "大于100" : "小于100";
    },
  },
  data() {
    return {
      a1: "a1",
      b1: "b1",
      num: 10,
      obj: {
        hobby: [], //爱好为数组
        edu: 0,
      },
    };
  },
  computed: {
    NewNum() {
      return (this.num += 10);
    },
  },
  beforeCreate() {
    console.log(this.a); //获取的是undefined
  },
  created() {
    console.log(this.a); //可以获取到a的值
  },
  beforeMount() {
    console.log(document.getElementsByTagName("p")[0]); //返回值为undefined
  },
  mounted() {
    console.log(document.getElementsByTagName("p")[0]); //返回p
  },
  directives:{
    focus :{
      bind(dom){
        console.log(dom);
      },
      inserted(dom){
        console.log(dom);
      },
      update(dom){
        console.log(dom);
      },
      componentUpdated(dom){
        console.log(dom);
      },
      unbind(dom){
        console.log(dom);
      },
    }
  },
  watch: {
    obj: {
      //监听复杂类型
      handler(newval, oldval) {
        console.log(newval); //新的值
        console.log(oldval); //旧的值
      },
      deep: true, //对 对象进行深度监听
      immediate: true, //进入页面这块代码就会执行
    },
  },
};
</script>

<style scoped>
.a1 {
  color: red;
}

.a2 {
  color: yellow;
}

.a3 {
  color: blue;
}

.b1 {
  font-size: 20px;
}

.b2 {
  font-size: 40px;
}

.b2 {
  font-size: 60px;
}
</style>
